<template>
  <page-loading :show="pageLoading">
    <!-- 施工单 -->
    <view class="construction-order">
      <!-- 车辆信息 -->
      <car-info-header :carInfo="carInfo"></car-info-header>

      <view class="main">
        <view class="info-box">
          <view class="row">
            <text class="color-999">施工时间：</text>
            <text class="color-333">{{ workerTime }}</text>
          </view>
          <view class="row">
            <text class="color-999">已派技师：</text>
            <text class="color-333">{{ worker }}</text>
          </view>
        </view>

        <!-- 异常项 -->
        <view class="error-box">
          <view class="title">施工异常项：</view>
          <view class="center-item" v-if="this.info.length">
            <view v-for="(item, i) in info" :key="i">
              <view>
                <view class="status-abnormal">
                  <!-- 未质检 -->
                  <view
                    class="item-title flex flex-ai-c"
                    v-if="qualityState === 2"
                  >
                    <view class="flex-1">
                      <text class="item-name pr-10">
                        {{ item.exceptionName }}
                      </text>
                      <i-icon
                        icon="icontishi"
                        type="single"
                        size="30rpx"
                        color="#EB5C02"
                      ></i-icon>
                    </view>
                    <view
                      v-if="account_signature_url"
                      class="flex flex-ai-c flex-jc-fe"
                    >
                      <view
                        v-if="!item.isClientAgree"
                        class="status-right status-notneed"
                      >
                        无需修复
                      </view>
                      <view v-else class="status-right color-EB5C02">
                        需要修复
                      </view>
                      <view
                        v-if="!item.orderId && item.isClientAgree"
                        class="status-right status-noorder"
                        @click="selOrder(item)"
                      >
                        创建关联订单
                      </view>
                      <view
                        v-if="item.orderId && item.isClientAgree"
                        @click="gotoOrder(item.orderId)"
                      >
                        <text class="status-right status-order"
                          >已关联订单</text
                        >
                        <u-icon
                          name="arrow-right"
                          color="#999999"
                          size="24"
                        ></u-icon>
                      </view>
                    </view>
                  </view>
                  <!-- 已质检 -->
                  <view class="item-title flex flex-ai-c" v-else>
                    <view class="flex-1">
                      <text class="item-name pr-10">
                        {{ item.exceptionName }}
                      </text>
                      <i-icon
                        icon="icontishi"
                        type="single"
                        size="30rpx"
                        color="#EB5C02"
                      ></i-icon>
                    </view>
                    <view v-if="!item.isClientAgree" class="status-right">
                      无需修复
                    </view>
                    <view
                      v-else-if="item.orderId && !item.repairUrl"
                      class="status-right"
                    >
                      未修复
                    </view>
                    <view v-else class="status-right color-EB5C02">
                      需要修复
                    </view>
                    <view
                      v-if="!item.orderId && item.isClientAgree"
                      class="status-right"
                    >
                      未关联订单
                    </view>
                    <view
                      v-else-if="item.isClientAgree"
                      @click="gotoOrder(item.orderId)"
                      class="flex flex-ai-c"
                    >
                      <text class="status-right status-order">已关联订单</text>
                      <u-icon
                        name="arrow-right"
                        color="#999999"
                        size="24"
                      ></u-icon>
                    </view>
                  </view>
                  <view class="flex flex-ai-c">
                    <view style="width: 50%">
                      <text class="item-tips">{{
                        item.exceptionMsg || '异常照片'
                      }}</text>
                      <view class="item-img" @click="showImg(i)">
                        <image
                          class="img"
                          :src="item.imgs[0]"
                          mode="scaleToFill"
                        />
                        <view class="img-tips">{{ item.position }}</view>
                      </view>
                    </view>
                    <view v-if="item.repairUrl">
                      <text class="item-tips2">已修复照片</text>
                      <view class="item-img">
                        <image
                          class="img"
                          :src="item.repairUrl"
                          mode="scaleToFill"
                        />
                        <view class="img-tips">{{ item.position }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 手动添加异常项 -->
          <view class="err-tags" v-if="!technician_signature_url">
            <view
              class="tag flex flex-ai-c"
              hover-class="hover-bg-color"
              @click="goAddErrPage()"
            >
              <i-icon icon="icontianjia_1" size="30rpx" color="#999"></i-icon>
              <text class="ml-10">添加异常项</text>
            </view>
          </view>

          <view
            class="ps color-EB5C02 font-24"
            v-if="!technician_signature_url"
          >
            *施工过程中，发现了上检中未拆检的异常情况，请及时通过系统进行记录
          </view>
        </view>
      </view>

      <view class="box">
        <view class="bottom-item bb-2">
          <view class="titel flex" @click="gotoSing(0)">
            <text class="flex-1 color-333 font-32">技师签字</text>
            <text class="color-EB5C02 font-32" v-if="!technician_signature_url"
              >等待技师签字确认</text
            >
            <u-icon
              v-if="!technician_signature_url"
              class="pl-10"
              name="arrow-right"
              color="#999"
              size="26rpx"
            ></u-icon>
          </view>
          <view class="sign">
            <image
              class="sign-img"
              :src="technician_signature_url"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="bottom-item">
          <view class="titel flex" @click="gotoSing(1)">
            <text class="flex-1 color-333 font-32">客户签字</text>
            <text class="color-EB5C02 font-32" v-if="!account_signature_url"
              >等待客户签字确认</text
            >
            <u-icon
              v-if="!account_signature_url"
              class="pl-10"
              name="arrow-right"
              color="#999"
              size="26rpx"
            ></u-icon>
          </view>
          <view class="sign">
            <image
              class="sign-img"
              v-if="account_signature_url"
              :src="account_signature_url"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
    </view>
  </page-loading>
</template>

<script>
import carInfoHeader from '@/components/afterSales/carInfoHeader.vue'

export default {
  components: {
    carInfoHeader,
  },
  data() {
    return {
      id: '',
      info: [],
      account_signature_url: '', //客户签字
      technician_signature_url: '', //技师签字
      pageLoading: false, //初始化加载效果
    }
  },

  computed: {
    carInfo() {
      return this.$store.state.afterSales.carInfo
    },

    qualityState() {
      return this.$store.state.afterSales.qualityState
    },

    worker() {
      return this.$store.state.afterSales.worker
    },
    workerTime() {
      return this.$store.state.afterSales.workerTime
    },
  },

  onLoad(e) {
    this.id = e.id
  },

  onShow() {
    this.getInfo()
    this.getSignInfo()
  },

  methods: {
    //获取施工异常
    getInfo() {
      this.$api.afterSales
        .getArriveOrderException({
          arriveId: this.id,
          SelectAll: false,
        })
        .then((res) => {
          console.log(res)
          if (res.data.exceptionList.length) {
            this.info = res.data.exceptionList
          }
          this.pageLoading = true
        })
        .catch((e) => {
          console.log(e)
          this.pageLoading = true
        })
    },

    //获取施工签字
    getSignInfo() {
      this.$api.afterSales
        .getSignInfo({
          arriveId: this.id,
          type: 3,
        })
        .then((res) => {
          console.log(res)
          this.account_signature_url = res.data.clientSignUrl
            ? res.data.clientSignUrl
            : ''
          this.technician_signature_url = res.data.workerSignUrl
            ? res.data.workerSignUrl
            : ''
        })
        .catch((e) => {
          console.log(e)
        })
    },

    // 跳转到手动添加异常项页
    goAddErrPage(item, i) {
      let data = item ? JSON.stringify(item) : false
      let index = !!JSON.stringify(i) ? i : -1
      uni.navigateTo({
        url: `/pages_afterSales/addManullyErrorItem/addManullyErrorItem?id=${this.id}&data=${data}&index=${index}`,
      })
    },

    showImg(i) {
      uni.previewImage({
        urls: this.info[i].imgs,
      })
    },

    //签名
    gotoSing(i) {
      if (!this.info.length) {
        uni.showToast({
          title: '没有异常，无需签字',
          icon: 'none',
        })
        return
      }
      let datas
      if (i === 0 && !this.technician_signature_url) {
        this.$store.commit('afterSales/setSignData', {
          id: this.id,
          type: 3,
          figure: i,
          fnName: 'arrvialOrderSign',
        })
        datas = JSON.stringify({
          type: 'before', // before为回退页面， after为下一页
          count: 1,
          fnName: 'arrvialOrderSign', //接口
        })
        uni.navigateTo({
          url:
            '/pages_afterSales/signature/signature?title=技师签字&typeOptions=' +
            datas,
        })
      } else if (i === 1 && !this.technician_signature_url) {
        uni.showToast({
          title: '请先完成技师签字',
          icon: 'none',
        })
      } else if (
        i === 1 &&
        !this.account_signature_url &&
        this.technician_signature_url
      ) {
        this.$store.commit('afterSales/setSignData', {
          id: this.id,
          type: 3,
          figure: i,
        })
        datas = JSON.stringify({
          type: 'before',
          count: 2,
          fnName: 'arrvialOrderSign',
        })
        uni.navigateTo({
          url:
            '/pages_afterSales/orderConfirm/customerConfirm?typeOptions=' +
            datas,
        })
      }
    },

    //订单详情
    gotoOrder(id) {
      console.log(id)
      uni.navigateTo({
        url: '/pages_afterSales/order/orderDetail/orderDetail?id=' + id,
      })
    },

    //关联订单
    selOrder(data) {
      this.$store.commit('afterSales/setOrderErrList', [data])
      uni.navigateTo({
        url:
          '/pages_afterSales/selectOrder/selectOrder?id=' +
          this.id +
          '&exceptionId=' +
          data.exceptionId,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.construction-order {
  min-height: 100%;
  background: #f6f6f6;

  .main {
    padding: 0 24rpx;
  }

  @mixin rowBox() {
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
  }

  .info-box {
    @include rowBox();
    padding: 10rpx 20rpx;

    .row {
      line-height: 60rpx;
      font-size: 28rpx;
    }
  }

  .error-box {
    @include rowBox();
    padding: 25rpx 20rpx;

    .err-tags {
      padding: 30rpx 0 22rpx;

      .tag {
        display: inline-block;
        padding: 12rpx 16rpx;
        background: #f6f6f6;
        border: 1px solid #eeeeee;
        border-radius: 10rpx;
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .center-item {
    padding: 0 20rpx;

    .status-abnormal {
      border-bottom: 2rpx solid #eee;
      padding-bottom: 30rpx;

      .item-title {
        height: 74rpx;

        .item-name {
          padding-left: 22rpx;
          font-size: 26rpx;
          color: #333;
          font-weight: bold;
        }
      }

      .item-tips {
        display: inline-block;
        background: #fff7f7;
        color: #eb5c02;
        font-size: 24rpx;
        height: 60rpx;
        line-height: 60rpx;
        // padding: 0 27rpx;
        border-radius: 10px;
        margin-bottom: 20rpx;
      }

      .item-tips2 {
        display: inline-block;

        background: #f4fef8;
        color: #3db707;
        font-size: 24rpx;
        height: 60rpx;
        line-height: 60rpx;
        // padding: 0 27rpx;
        border-radius: 10px;
        margin-bottom: 20rpx;
      }

      .item-img {
        position: relative;
        width: 266rpx;
        height: 200rpx;
        border-radius: 10rpx;
        background: #e1e1e1;

        .img {
          width: 266rpx;
          height: 200rpx;
          border-radius: 10rpx;
        }

        .img-tips {
          position: absolute;
          bottom: 0;
          width: 266rpx;
          height: 50rpx;
          line-height: 50rpx;
          background: rgba(0, 0, 0, 0.4);
          border-radius: 0px 0px 10rpx 10rpx;
          color: #fff;
          padding: 0 20rpx;
          font-size: 22rpx;
          font-weight: bold;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      .status-right {
        display: inline-block;
        font-size: 20rpx;
        transform: scale(0.87);
        color: #999999;
      }

      .status-noorder {
        line-height: 46rpx;
        height: 4r6px;
        background: #ffe23e;
        border-radius: 10rpx;
        color: #333;
        padding: 0 16rpx;
      }

      .color-EB5C02 {
        color: #eb5c02;
      }
    }

    .fw-400 {
      font-weight: 400;
    }

    .pl-20 {
      padding-left: 20rpx;
    }

    .pr-10 {
      padding-right: 10rpx;
    }

    .pl-0 {
      padding-left: 0;
    }

    .font-20 {
      font-size: 20rpx;
    }

    .color-3DB707 {
      color: #3db707;
    }

    .color-EB5C02 {
      color: #eb5c02;
    }
  }
}

.box {
  // padding-bottom: 10rpx;
  margin: 20rpx 24rpx 0;
  .bottom-item {
    padding: 0 20rpx;
    background: #fff;
    .titel {
      padding: 20rpx 0;
    }

    .sign {
      height: 140rpx;

      .sign-img {
        height: 140rpx;
        margin-left: 150rpx;
        width: 460rpx;
      }
    }
  }
}
</style>
